<template>
  <div class="colorful-text-page">
    <div class="text-container">
      <h1>动态炫彩文字</h1>
      
      <div class="content">
        <div class="options">
          <el-form>
            <el-form-item label="文字样式">
              <el-select v-model="selectedStyle" placeholder="请选择文字样式">
                <el-option label="彩虹渐变" value="rainbow"></el-option>
                <el-option label="霓虹灯" value="neon"></el-option>
                <el-option label="金属质感" value="metallic"></el-option>
                <el-option label="火焰效果" value="fire"></el-option>
                <el-option label="闪烁效果" value="blink"></el-option>
                <el-option label="波浪效果" value="wave"></el-option>
                <el-option label="3D效果" value="3d"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <div class="preview-area">
          <el-input 
            v-model="text" 
            placeholder="请输入文字"
            maxlength="50"
            show-word-limit
          />
          <div class="preview" :style="previewStyle" ref="previewRef">
            {{ text || '预览效果' }}
          </div>
          
          <div class="button-group">
            <el-button type="primary" @click="generateText">
              <el-icon><MagicStick /></el-icon>
              生成炫彩文字
            </el-button>
            <el-button type="success" @click="generateGif" :disabled="!text">
              <el-icon><VideoCamera /></el-icon>
              生成GIF
            </el-button>
            <el-button @click="clearText">
              <el-icon><Delete /></el-icon>
              清空
            </el-button>
            <el-button type="warning" @click="goToHomepage">
              <el-icon><Back /></el-icon>
              返回
            </el-button>
          </div>
        </div>
      </div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>支持多种动态文字效果</li>
          <li>可以生成GIF动画文件</li>
          <li>最多支持输入50个字符</li>
          <li>建议使用较短的文本以获得最佳效果</li>
          <li>生成的GIF可以保存使用</li>
          <li>所有效果在本地生成，不会上传服务器</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { MagicStick, VideoCamera, Delete, Back } from '@element-plus/icons-vue'
import GIF from 'gif.js'

const router = useRouter()
const text = ref('')
const selectedStyle = ref('rainbow')
const previewStyle = ref({})
const previewRef = ref(null)

const generateText = () => {
  if (!text.value.trim()) {
    ElMessage.warning('请输入要生成的文字')
    return
  }
  applyStyle()
  ElMessage.success('样式已更新')
}

const applyStyle = () => {
  switch (selectedStyle.value) {
    case 'rainbow':
      previewStyle.value = {
        background: 'linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',
        backgroundSize: '400% 400%',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        animation: 'rainbow 5s ease infinite'
      }
      break
    case 'neon':
      previewStyle.value = {
        color: '#fff',
        textShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de'
      }
      break
    case 'metallic':
      previewStyle.value = {
        background: 'linear-gradient(to bottom, #d3d3d3, #a9a9a9)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        textShadow: '2px 2px 4px rgba(0,0,0,0.3)'
      }
      break
    case 'fire':
      previewStyle.value = {
        background: 'linear-gradient(45deg, #ff0000, #ff7f00, #ffff00)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        textShadow: '0 0 10px #ff0000, 0 0 20px #ff7f00, 0 0 30px #ffff00'
      }
      break
    case 'blink':
      previewStyle.value = {
        color: '#00ff00',
        animation: 'blink 1s infinite'
      }
      break
    case 'wave':
      previewStyle.value = {
        display: 'inline-block',
        animation: 'wave 2s ease-in-out infinite'
      }
      break
    case '3d':
      previewStyle.value = {
        color: '#ffffff',
        textShadow: '0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15)'
      }
      break
  }
}

const generateGif = async () => {
  if (!text.value.trim()) {
    ElMessage.warning('请先输入文字')
    return
  }

  ElMessage.info('正在生成GIF，请稍候...')

  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  ctx.font = 'bold 40px Arial'
  const textMetrics = ctx.measureText(text.value)
  const textWidth = Math.ceil(textMetrics.width)
  const textHeight = 60

  canvas.width = textWidth + 20
  canvas.height = textHeight

  const gif = new GIF({
    workers: 2,
    quality: 10,
    width: canvas.width,
    height: canvas.height,
    transparent: 'rgba(0,0,0,0)',
    workerScript: '/gif.worker.js'
  })

  const frames = 30
  for (let i = 0; i < frames; i++) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    if (selectedStyle.value === 'rainbow') {
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
      const hue = (i / frames) * 360
      gradient.addColorStop(0, `hsl(${hue}, 100%, 50%)`)
      gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 100%, 50%)`)
      ctx.fillStyle = gradient
    } else if (selectedStyle.value === 'neon') {
      ctx.fillStyle = '#fff'
      ctx.shadowColor = '#ff00de'
      ctx.shadowBlur = 20 + Math.sin(i / frames * Math.PI * 2) * 10
    } else if (selectedStyle.value === 'metallic') {
      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
      gradient.addColorStop(0, '#d3d3d3')
      gradient.addColorStop(1, '#a9a9a9')
      ctx.fillStyle = gradient
    } else if (selectedStyle.value === 'fire') {
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
      gradient.addColorStop(0, '#ff0000')
      gradient.addColorStop(1, '#ffff00')
      ctx.fillStyle = gradient
    } else if (selectedStyle.value === 'blink') {
      ctx.fillStyle = '#00ff00'
    } else if (selectedStyle.value === 'wave') {
      ctx.fillStyle = '#00ff00'
    } else if (selectedStyle.value === '3d') {
      ctx.fillStyle = '#ffffff'
    }

    ctx.font = 'bold 40px Arial'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(text.value, canvas.width / 2, canvas.height / 2)

    gif.addFrame(ctx, {copy: true, delay: 50})
  }

  gif.on('finished', function(blob) {
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `colorful_text_${new Date().getTime()}.gif`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    ElMessage.success('GIF生成成功')
  })

  gif.render()
}

const clearText = () => {
  text.value = ''
  ElMessage.success('已清空')
}

const goToHomepage = () => {
  router.push('/')
}

watch(selectedStyle, applyStyle)
</script>

<style lang="scss" scoped>
.colorful-text-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .text-container {
    max-width: 800px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .content {
      display: flex;
      gap: 30px;
      margin-bottom: 30px;

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 20px;
      }

      .options {
        flex: 1;

        .el-select {
          width: 100%;
        }
      }

      .preview-area {
        flex: 2;

        .preview {
          text-align: center;
          font-size: 24px;
          margin: 20px 0;
          min-height: 50px;
          padding: 20px;
          border: 1px solid #ddd;
          border-radius: 8px;
          background-color: #f8fafc;
        }
      }
    }

    .button-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin: 20px 0;

      .el-button {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .el-icon {
          font-size: 16px;
        }
      }

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 10px;

        .el-button {
          width: 100%;
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
        text-align: left;
      }

      ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        text-align: left;

        li {
          margin-bottom: 12px;
          line-height: 1.6;
          position: relative;
          padding-left: 18px;
          text-align: left;

          &:before {
            content: "•";
            color: #409EFF;
            font-size: 18px;
            position: absolute;
            left: 0;
            top: -2px;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 480px) {
  .colorful-text-page {
    padding: 10px;

    .text-container {
      padding: 20px;
      width: 100%;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .content {
        gap: 15px;

        .preview-area {
          .preview {
            font-size: 20px;
            padding: 15px;
          }
        }
      }

      .notes {
        padding: 15px;
        margin-top: 30px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
